<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏渲染</title>
    <link rel="stylesheet" href="../static/css/atom.css">
    <style>
        .screen-wrapper {
            position: relative;
            z-index: 3;
        }

        .label {
            padding: 4px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 4px;
            font-size: 14px;
            pointer-events: auto;
        }
    </style>
</head>

<body>

    <div class="screen-wrapper">
        <div class="three-box" id="three-box"></div>
    </div>

    <div id="scene-container"></div>

    <script type="importmap">
    {
        "imports": {
        "three": "../three/v170/three.module.min.js",
        "three/addons/": "../three/v170/"
        }
    }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { CSS2DRenderer, CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
        import { CSS3DRenderer, CSS3DObject } from "three/addons/renderers/CSS3DRenderer.js";
        import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DragControls } from 'three/addons/controls/DragControls.js';
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        console.log(`[THREE版本]`, THREE.REVISION);

        // 初始化场景、相机和 WebGL 渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 初始化 CSS3D 渲染器
        const labelRenderer = new CSS3DRenderer();
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.domElement.style.position = 'absolute';
        labelRenderer.domElement.style.top = '0';
        labelRenderer.domElement.style.pointerEvents = 'none'; // 防止干扰鼠标事件
        document.body.appendChild(labelRenderer.domElement);

        // 创建 HTML 标签
        function createLabel(name) {
            const div = document.createElement('div');
            div.innerHTML = name;
            div.className = 'label'; // 可添加样式
            const label = new CSS3DObject(div);
            label.scale.set(0.02, 0.02, 0.02); // 调整标签大小
            // label.scale.set(0.2, 0.2, 0.2); // 调整标签大小
            return label;
        }

        // 添加立方体和标签到场景中
        // const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
        const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
        const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(boxGeometry, boxMaterial);
        scene.add(cube);

        const label = createLabel('Cube');
        label.position.set(0, 1.5, 0); // 设置标签位置
        scene.add(label);

        // 设置相机位置
        camera.position.z = 5;

        // 渲染循环
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01; // 示例旋转动画
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
            labelRenderer.render(scene, camera); // 渲染 HTML 标签
        }

        animate();
    </script>


</body>

</htm